<template>
  <div class="pagination" v-show="total > 0">
    <el-pagination
      @size-change="changePageSize"
      @current-change="changePageNum"
      :total="total"
      :current-page="current"
      :page-size="size"
      :page-sizes="sizes"
      background
      :layout="layout">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'pagination',
  data () {
    return {}
  },
  // 子组件接收父组件的值
  props: {
    // 总条目数
    total: {
      type: Number,
      default: 0
    },
    // 当前页
    current: {
      type: Number,
      default: 1
    },
    // 每页大小
    size: {
      type: Number,
      default: 20
    },
    // 每页大小规格
    sizes: {
      type: Array,
      default: function () {
        return [10, 20, 50, 100]
      }
    },
    // 布局
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
  },
  // 计算属性  计算属性是基于他们的依赖做缓存
  // （如果计算的逻辑大的话，可以用这个，比方说你先循环100次，再循环1000次，他会把上一次的循环也加上去，也就是缓存）
  computed: {},
  // 侦听器 响应数据的变化
  watch: {
    /**
     * 监听页数变化
     * @param val   值
     * @param index 下标
     */
    current (val, index) {
      // console.log(`watch - index: ${index}, val: ${val}`)
      // 改变这个值并不会触发 handleCurrentChange
      if (typeof val === 'number') {
        this.current = val
      }
    }
  },
  methods: {
    // size变化
    changePageSize (val) {
      // console.log(`每页 ${val} 条`)
      // 子组件向父组件传值
      this.$emit('changePageSize', val)
    },
    // 当前页变化
    changePageNum (val) {
      // console.log(`当前页: ${val}`)
      // 子组件向父组件传值
      this.$emit('changePageNum', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination {
  overflow: hidden !important;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px ;


  //::v-deep .el-pagination__total {
  //  height: 20px !important;
  //  line-height: 20px !important;
  //  min-width: 44px;
  //  font-size: 12px !important;
  //  font-weight: 400 !important;
  //  text-align: center !important;
  //  color: #39404d !important;
  //  margin-right: -5px !important;
  //}
  //
  //::v-deep .el-pagination__sizes .el-select--mini .el-input {
  //  height: 20px !important;
  //  line-height: 20px !important;
  //  width: 76px !important;
  //}
  //
  //::v-deep .el-pagination__sizes .el-input__inner {
  //  height: 20px !important;
  //  line-height: 21px !important;
  //  width: 76px !important;
  //  font-size: 12px !important;
  //  font-weight: 400 !important;
  //  text-align: center !important;
  //  color: #39404d !important;
  //  padding-right: 20px !important;
  //  padding-left: 0 !important;
  //  margin: 0 16px !important;
  //  background: #f2f5fa !important;
  //}
  //
  //::v-deep .el-select__caret {
  //  color: #39404d !important;
  //  margin-left: 20px !important;
  //}
  //
  //::v-deep .el-select {
  //  display: block !important;
  //}
  //
  //::v-deep .el-pagination button {
  //  min-width: 20px !important;
  //}
  //
  //::v-deep .el-input__suffix {
  //  margin-right: -18px !important;
  //}
  //
  //::v-deep .btn-prev {
  //  height: 20px !important;
  //  line-height: 20px !important;
  //  width: 20px !important;
  //  background: #f2f5fa !important;
  //  /* border: 0.5px solid rgba(0, 0, 0, 0.38); */
  //  border-radius: 5px !important;
  //  margin-left: 16px !important;
  //  margin-right: 4px !important;
  //  padding: 0 !important;
  //  color: $color !important;
  //}
  //
  //::v-deep .btn-next {
  //  height: 20px !important;
  //  line-height: 20px !important;
  //  width: 20px !important;
  //  background: #f2f5fa !important;
  //  /* border: 0.5px solid rgba(0, 0, 0, 0.38) !important; */
  //  border-radius: 5px !important;
  //  /* margin: 0 8px; */
  //  margin-right: 8px !important;
  //  margin-left: 4px !important;
  //  padding: 0 !important;
  //  color: $color !important;
  //  /* opacity: 0.4; */
  //}
  //
  //::v-deep .el-pagination button:disabled {
  //  opacity: 0.4;
  //}
  //
  //::v-deep .el-pager {
  //  height: 20px !important;
  //  line-height: 20px !important;
  //}
  //
  //::v-deep .el-pager .number {
  //  height: 20px !important;
  //  line-height: 19px !important;
  //  /* width: 24px; */
  //  text-align: center !important;
  //  background: #f2f5fa !important;
  //  /* border: 0.5px solid #39404d !important; */
  //  border-radius: 5px !important;
  //  color: $color;
  //  margin: 0 4px !important;
  //}
  //
  //::v-deep .el-pager li.active {
  //  background: $color !important;
  //  border: 0.5px solid $color !important;
  //  color: #ffffff !important;
  //}
  //
  ::v-deep .el-pager li {
   margin: 0 4px !important;
  }
  //
  //::v-deep .el-pagination__jump {
  //  height: 20px !important;
  //  font-size: 12px !important;
  //  font-weight: 400 !important;
  //  text-align: center !important;
  //  color: #39404d !important;
  //  line-height: 20px !important;
  //  margin-left: 7px !important;
  //}
  //
  //::v-deep .is-in-pagination .el-input__inner {
  //  /* width: 55px; */
  //  height: 20px !important;
  //  line-height: 20px !important;
  //  background: #f2f5fa !important;
  //  border: 0.5px solid #d2d8e2 !important;
  //  border-radius: 5px !important;
  //  font-size: 12px !important;
  //}
  //
  //::v-deep .is-in-pagination {
  //  margin-left: 8px !important;
  //}
  //
  //::v-deep .el-pager li.btn-quicknext {
  //  line-height: 20px !important;
  //}
  //
  //::v-deep .more::before {
  //  line-height: 20px !important;
  //}
  //
  //::v-deep .el-pager li.btn-quicknext {
  //  background: none !important;
  //}
  //
  //::v-deep .el-pager li.btn-quickprev {
  //  background: none !important;
  //}


}
</style>
